<template>
  <view class="vip-container">
    <e-navbar leftTitle="易小语会员" :placeholder="false"></e-navbar>
    <view style="height: 1rpx"></view>
    <view class="vip-header">
      <image :src="$image('/images/vip-header.png')" mode="aspectFill"></image>
    </view>
    <view class="vip-user-card">
      <image class="vip-bg" :src="$image('/images/vip-bg.png')" mode="aspectFill"></image>
      <view class="vip-user-info flex col-center">
        <view class="m-r-24">
          <u-avatar :src="$image(userinfo.avatar,'yes')" size="54"></u-avatar>
        </view>
        <view>
          <view class="font-38 pingfang-heavy">{{userinfo.nickname || '--'}}</view>
          <view class="font-24" v-if="userinfo.is_vip == 0">您当前不是易小语会员 请开通</view>
          <view class="font-24" v-else>已开通易小语会员</view>
        </view>
      </view>
    </view>
    <view class="rights-title p-30 flex col-center">
      <image class="rights-icon" :src="$image('/images/vip-rights.png')" mode="aspectFill"></image>
      <text class="font-32 m-l-12 pingfang-heavy">易小语会员权益</text>
    </view>
    <view class="vip-table">
      <view class="vip-table_header table-row">
        <view>等级</view>
        <view>易小语会员</view>
        <view>非会员</view>
      </view>
      <view class="table-body">
        <view class="table-row table-item">
          <view style="height: 30rpx !important;"></view>
          <view style="height: 30rpx !important;"></view>
          <view style="height: 30rpx !important;"></view>
        </view>
        <view class="table-row table-item" v-for="(item,index) in vipRightsList" :key="index">
          <view>
            <view class="hidden_one">{{item.benefits}}</view>
          </view>
          <view>
            <image class="yes-icon" :src="$image('/images/vip-yes.png')" mode="aspectFill"></image>
            <!--<image class="no-icon" v-else :src="$image('/images/vip-no.png')" mode="aspectFill"></image>-->
          </view>
          <view>
            <image class="yes-icon" v-if="item.level !== '会员用户'" :src="$image('/images/vip-yes.png')" mode="aspectFill"></image>
            <image class="no-icon" v-else :src="$image('/images/vip-no.png')" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>
    <u-gap height="80"></u-gap>
    <view class="bottom-open">
      <view class="flex col-center row-between flex-1 p-r-30 p-l-30">
        <view class="font-28 flex col-bottom row-between flex-1">
          <view class="pingfang-heavy">易小语会员</view>
          <view class="flex col-bottom" v-if="userinfo.is_vip == 0">
            <view class="text-999 font-24">售价</view>
            <view class="pingfang-heavy text-bold open-price-icon m-l-10" style="line-height: 32rpx">￥</view>
          </view>
        </view>
        <view class="font-24 flex col-bottom row-between" v-if="userinfo.is_vip == 0">
          <view class="pingfang-heavy text-bold open-price" style="line-height: 40rpx">{{Number(vipSetting.value).toFixed(2) || "暂无"}}</view>
        </view>
      </view>
      <view class="open-btn" @click="handleShowPopup()">{{ userinfo.is_vip == 0 ? "立即开通" : "已开通" }}</view>
    </view>
		<e-popup ref="openVip" @close="handleClosePopup" @confirm="handleConfirmPopup">
		  <view class="popup-cell text-center" slot="content">
				是否确认开通会员?
		  </view>
		</e-popup>

    <!-- 支付方式弹窗 -->
    <e-pay-type-popup ref="payTypeRef" @choose="handleChoosePayType"></e-pay-type-popup>
    <!--  确认支付弹窗  -->
    <e-pay-popup ref="payPopupRef" @paySuccess="handlePayResult"></e-pay-popup>

  </view>
</template>

<script>
let app = getApp();
import {wxPay} from "@/common/pay";

export default {
  data() {
    return {
      vipRightsList:[],
      // vipRightsList: [
      //   "绿色无广告",
      //   "神煞智能设置",
      //   "地支藏干智能设置",
      //   "刑冲破害合智能设置",
      //   "人元司令分野",
      //   "智能古籍《穷通宝鉴》",
      //   "智能古籍《滴天髓》",
      //   "智能古籍《天命通会》",
      //   "智能古籍《神峰通考》",
      //   "智能古籍《天元巫咸》",
      //   "智能古籍《八字提要》",
      //   "智能古籍《李虚中命书》",
      //   "智能古籍《五行精纪》",
      //   "合盘",
      //   "流日",
      //   "流时",
      //   "五行能量专业版",
      //   "同党异党能量",
      //   "系统评估旺衰",
      //   "系统评估格局",
      //   "学堂古籍排盘",
      //   "筛选功能专业版"
      // ],
			userinfo:{},
			vipPrice:0,  //vip开通价格
      vipSetting: {},
    };
  },
	computed:{
		getEncryptMobile(){
			if(this.userinfo.mobile){
				let first = this.userinfo.mobile.slice(0,4);
				let last = this.userinfo.mobile.slice(-3);
				return first + ' ***** ' + last;
			}
		}
	},
	onLoad() {
		this.getVipPrice();
		this.getMineInfo();
    this.getSetting();
	},
	methods:{
    // 获取配置列表
    async getSetting(){
      const res = await this.$api.setting();
      if(res.code == 1){
        uni.removeStorageSync('setting');
        uni.setStorageSync('setting', JSON.stringify(res.data));
        this.vipSetting = res.data.find(item=>item.key == 'vip_amount');
        console.log("ccccc", this.vipSetting);
      }
    },
		async getVipPrice(){
			const res = await this.$api.get_vip_list();
			if(res.code == 1){
        this.vipRightsList = res.data.list;
			}
		},
		getMineInfo(){
			let userinfo = uni.getStorageSync('userinfo') || "";
			if(userinfo){
				this.userinfo = JSON.parse(userinfo);
				console.log('cccccc',this.userinfo)
			}
		},
		// 显示是否确认支付弹窗
		handleShowPopup(){

      if(this.userinfo.is_vip == 1) return;
			if(this.vipSetting.value <= 0) return this.$u.toast('系统错误');
      this.$refs.payTypeRef.handleShowPayTypePopup({});
      return;
			this.$refs.openVip.handleShowPopup('提示');
		},
		// 取消按钮回调
		handleClosePopup(){
		  this.$refs.openVip.handleClosePopup();
		},
		// 确认按钮回调
		async handleConfirmPopup(){
			const res = await this.$api.create_payment({description: "vip"});
			if(res.code == 1){
        this.$refs.openVip.handleClosePopup();
        wxPay(res.data,  result=>{
          if(result.code == 1){
            uni.showToast({
              title: "恭喜你,开通易小语会员",
              icon: "success",
            })
            setTimeout(async ()=>{
              // this.userinfo = await app.getMineInfo();
            },1000)
            console.log("支付成功回调", this.userinfo);
          }
        })
			}
		},
		// 微信小程序支付
		async handleMiniWechatPay(data){
		  // 调起微信支付
		  uni.requestPayment({
		    provider: 'wxpay', // 服务提提供商
		    timeStamp: data.timeStamp, // 时间戳
		    nonceStr: data.nonceStr, // 随机字符串
		    package: data.package,
		    signType: data.signType, // 签名算法
		    paySign: data.paySign, // 签名
		    success: (res)=> {
		      this.$u.toast(`开通成功`);
		      this.handleClosePopup();
		      uni.showLoading({
		      	title:'请稍后'
		      })
		      setTimeout(()=>{
		      	uni.hideLoading();
		      	uni.navigateBack();
		      },1000)
		      // 业务逻辑。。。
		    },
		    fail: (err)=> {
		      uni.showToast({
		        title: '支付失败',
		        icon: 'error'
		      })
		      console.log('支付失败',err);
		    }
		  });
		},
    // 组件中选择支付方式
    handleChoosePayType(val){
      let data = {
        payType: val,
        payWay: "vip"
      };
      this.$refs.payPopupRef.handleShowPayPopup({}, data);
    },
    handlePayResult(){
      uni.showToast({
        title: "恭喜你,开通易小语会员",
        icon: "success",
      })
      setTimeout(async ()=>{
        this.userinfo = await app.getMineInfo();
      },1000);
    }
	}
}
</script>

<style lang="scss" scoped>
  .vip-container{
    .vip-header{
      height: 354rpx;
      // #ifdef MP-WEIXIN
      margin-top: 70rpx;
      // #endif
      image{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .vip-user-card{
      height: 240rpx;
      margin: -230rpx 50rpx 0 50rpx;
      // #ifdef MP-WEIXIN
      // #endif
      // #ifndef MP-WEIXIN
      // #endif
      position: relative;
      .vip-bg{
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
      }
      .vip-user-info{
        position: absolute;
        z-index: 1;
        color: #fff;
        left: 40rpx;
        bottom: 40rpx;
      }
    }
    .rights-title{
      .rights-icon{
        width: 50rpx;
        height: 44rpx;
        display: block;
      }
    }
    .vip-table{
      margin: 0 30rpx;
      &_header{
        height: 120rpx;
        background: #313548 !important;
        border-radius: 20rpx 20rpx 0 0;
        font-size: 28rpx;
        color: #fff;
        >view{
          padding-bottom: 40rpx;
        }
        >view:nth-child(2){
          height: 116%;
          border-radius: 20rpx 20rpx 0 0;
          padding-bottom: 56rpx;
          font-family: 'pingfang-heavy';
          color: #997121;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(0deg, #E1BF7C 0%, #FDE1B0 100%);
        }
      }
      .table-row{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        >view:first-child{
          width: 50%;
          padding-left: 20rpx;
          padding-right: 20rpx;
        }
        >view:not(:first-child){
          width: 25%;
          text-align: center;
        }

      }
      .table-row:last-child{
        //border: 1px solid red;
        //>view{
        //  padding: 12rpx 0;
        //}
      }
      .table-body{
        margin-top: -44rpx;
        position: relative;
        z-index: 3;
        border-radius: 20rpx;
        overflow: hidden;
      }
      .table-item{
        font-size: 24rpx;
        color: #666;
        .yes-icon{
          width: 38rpx;
          height: 38rpx;
          display: block;
        }
        .no-icon{
          width: 30rpx;
          height: 30rpx;
          display: block;
        }
        >view{
          //height: 100% !important;
          height: 60rpx !important;
        }
        >view:not(:first-child){
          display: flex;
          align-items: center;
          justify-content: center;
        }
        >view:nth-child(2){
          background: rgba(240,199,143,0.2);
        }
      }
    }
    $priceColor: #997121;
    .bottom-open{
      position: fixed;
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      bottom: 0;
      left: 0;
      z-index: 9;
      background: #fff;
      .open-price-icon{
        color: $priceColor;
      }
      .open-price{
        font-size: 48rpx;
        color: $priceColor;
      }
      .open-btn{
        width: 240rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: $priceColor;
        font-family: 'pingfang-heavy';
        background: linear-gradient(-90deg, #E1BF7B 0%, #FDE1B0 100%);
      }
    }
  }
</style>
